<!--
 * @Author: MarsLay
 * @Date: 2021-12-27 16:52:10
 * @LastEditTime: 2022-11-21 14:07:16
 * @LastEditors: MarsLay 331412466@qq.com
 * @Description: 自定义标签，支持纯色/透明图背景/图标/三角
-->
<template>
  <view
    class="tag"
    :class="param.mode"
  >
    <view
      v-if="param.type == 'border'"
      class="status-border"
    >
      <view
        class="status-border-txt"
        :style="{ fontSize:param.fontSize,background:param.bgColor,color:param.color}"
      >{{ param.title }}</view>
    </view>
    <view
      v-if="['dash','solid'].includes(param.type)"
      class="inner"
    >
      <image
        v-if="param.icon"
        mode="aspectFit"
        class="status-icon"
        :src="param.icon"
      />
      <view
        class="status-bg"
        :style="{ background: param.bgColor, opacity:param.opacity}"
      ></view>
      <view
        class="status-txt"
        :style="{ color: param.color,fontSize:param.fontSize}"
      >{{ param.title }}</view>
    </view>
    <block v-if="param.mode == 'corner'">
      <view
        class="inner"
        :style="{borderTop: param.bdTop,borderLeft:param.bdLeft}"
      >
      </view>
      <view
        class="txt single-ellipsis"
        :style="{color: param.color,fontSize:param.fontSize}"
      >{{ param.title }}</view>
    </block>
    <image
      v-if="path"
      :style="{'width':width,height:height}"
      model="widthFix"
      :src="path"
    ></image>
  </view>
</template>

<script>
export default {
  name: "tag",
  components: {},
  props: {
    param: {
      type: Object,
      default: () => ({}),
    },
    path: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "146upx",
    },
    height: {
      type: String,
      default: "96upx",
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  onLoad(d) {},
  onShow() {},
  methods: {},
};
</script>
<style lang='less' scoped>
.rect {
  .flex(row,flex-start);
  position: relative;
  width: fit-content;
  height: fit-content;
  font-size: 25upx;

  .inner {
    .flex();
    padding: 5upx 15upx;
  }

  .status-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 10upx;
  }

  .status-txt {
    position: relative;
    color: #ffffff;
  }

  .status-border {
    padding: 2upx;
    text-align: center;
    border-radius: 7upx;
    border-width: 2upx;
    border-style: solid;
  }

  .status-border-txt {
    width: 88upx;
    height: 36upx;
    line-height: 36upx;
    color: #ffffff;
    border-radius: 7upx;
  }

  .status-icon {
    position: relative;
    z-index: 2;
    margin-right: 10upx;
    width: 30upx;
    height: 30upx;
  }
}

.corner {
  position: relative;
  .inner {
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    width: 0;
    height: 0;
  }
  .txt {
    position: absolute;
    font-size: 20upx;
    top: 24upx;
    right: -10upx;
    z-index: 1;
    padding: 0 10upx;
    width: 100upx;
    transform: rotateZ(45deg);
    text-align: center;
  }
}
</style>